<%@ taglib uri="/tld/extremecomponents" prefix="ec" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="java.util.ArrayList;" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="overflow:hidden;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="../js/echarts.min.js"></script>
	
	<link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrap.min.css"/><!--栅格布局-->
	<link rel="stylesheet" href="<%=request.getContextPath() %>/css/templatemo-style.css"/>
	<style>
	    div{position:relative;}
			   
	    #reportsPage{
			 overflow: hidden;
			 background-color :#fff;
			 background-image:url('../images/right_bg.jpg');
			 background-size: cover;
		}
				
		table{
	   		 margin:0px;
		}
		#container1,#container2,#container3,#container4{
			margin-top:20px;
			height:220px;
		    background-color:rgba(0,0,0,0.1); 
			color:red;
			border:3px solid #ccc; 
			
		}
		#container1:hover,#container2:hover,#container3:hover,#container4:hover{
			transform:translateY(-6px);
			box-shadow:0 0 15px rgba(0,0,0,.8);
			border:3px solid rgb(148, 147, 147);
		}
	</style>
<title>首页</title>
</head>
<body id = "reportsPage" >
	<!--从后台取出数据-->
	<%
		ArrayList<Integer> studentDataList = (ArrayList<Integer>)request.getSession().getAttribute("studentDataList");
		ArrayList<String> studentNameList = (ArrayList<String>)request.getSession().getAttribute("studentNameList");
		ArrayList<Integer> workDataList = (ArrayList<Integer>)request.getSession().getAttribute("workDataList");
		ArrayList<String> workNameList = (ArrayList<String>)request.getSession().getAttribute("workNameList");
		ArrayList<Integer> topicDataList = (ArrayList<Integer>)request.getSession().getAttribute("topicDataList");
		ArrayList<String> topicNameList = (ArrayList<String>)request.getSession().getAttribute("topicNameList");
		 ArrayList<Integer> listtest3 = (ArrayList<Integer>)request.getSession().getAttribute("list3");
		String[] nametest3 = (String[])request.getSession().getAttribute("name3"); 
		ArrayList<String> workList = (ArrayList<String>)request.getSession().getAttribute("workList");
		ArrayList<String> scorelist = (ArrayList<String>)request.getSession().getAttribute("scoreList");
		
	%>
	<div class="row tm-content-row">
		<!--第一部分-->
    	<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-block-col">
        	<div class="tm-bg-primary-dark tm-block" >
                <div id="container1" style="" onclick="window.location='analysisstudent?ActionType=student_Effort_Level'"></div>
    			<script type="text/javascript">
        			// 基于准备好的dom，初始化echarts实例
        			var myChart = echarts.init(document.getElementById('container1'));
        
    				var list=new Array();
    				var title=new Array();
					<%for(int i=0;i<studentDataList.size();i++){%>  
						list[<%=i%>]=<%=studentDataList.get(i)%>;
						//document.write(list[<%=i%>]);
	 				<%}%>
	 				<%for(int i=0;i<studentNameList.size();i++){%>  
	 					title[<%=i%>]=" <%=studentNameList.get(i)%> ";
						//document.write(list[<%=i%>]);
 					<%}%>
        
        			// 指定图表的配置项和数据
        			var option = {
            			title: {
                			text: '学生努力程度',
                				 textStyle: {
                                     fontWeight: 'normal',             
                                     color: '#2A5D75'  //标题颜色A3FFFC
                             },
            			},
            			tooltip: {},
            			legend: {
            				orient: 'vertical',
            				left: 'right',
                			data:['努力程度'],
                			  textStyle: {
                                  fontWeight: 'normal',              
                                  color: 'black'   //legend颜色
                          },
            			},
            			xAxis: {
                			data: title,
                			 //  改变x轴颜色
                            axisLine:{
                                lineStyle:{
                                    color:'#2A5D75',
                                }
                            },
            			},
            			yAxis: {
            				 //  改变y轴颜色
                            axisLine:{
                                lineStyle:{
                                    color:'#2A5D75',
                                }
                            },
            			},
            			series: [{
                			name: '努力程度',
                			type: 'line',
                            itemStyle:{
                                normal:{
                                    color:'#C23531' //  给折线添加颜色2A5D75
                                },
                            }, 
                			markLine:{
                				/*以下设置一行后，平均线就没有开始和结束标记了（即看不见箭头了）*/
                				symbol:"none",
                				lineStyle:{
		            				normal:{
            							color:"#A3FFFC",//A3FFFC
            							width:2
            							//type:"solid",
            						}
            					},
                				data: [{
                					//name: '平均线',
    								// 支持 'average', 'min', 'max'
    	            				//type: 'average',
    	            				yAxis: 35,name:'不努力'
                				},{
    	            				yAxis: 75,name:'比较努力'
                				},{
    	            				yAxis: 95,name:'努力'
                				}]
                			},
                			data: list
            			}]
        			};

        			// 使用刚指定的配置项和数据显示图表。
        			myChart.setOption(option);
    			</script>

			</div>
		</div>
		<!--第二部分-->
    	<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-block-col">
        	<div class="tm-bg-primary-dark tm-block" >
                <div id="container2" style="" onclick="window.location='analysiswork?ActionType=work_Finish_Condition'"></div>
				<script type="text/javascript">
        			// 基于准备好的dom，初始化echarts实例
        			var myChart = echarts.init(document.getElementById('container2'));
        
    				var list=new Array();
    				var title=new Array();
					<%for(int i=0;i<workDataList.size();i++){%>  
						list[<%=i%>]=<%=workDataList.get(i)%>;
						//document.write(list[<%=i%>]);
	 				<%}%>
	 				<%for(int i=0;i<workNameList.size();i++){%>  
 						title[<%=i%>]=" <%=workNameList.get(i)%> ";
						//document.write(list[<%=i%>]);
					<%}%>

        
        			// 指定图表的配置项和数据
        			var option = {
            			title: {
                			text: '作业完成情况',
                			textStyle: {
                                fontWeight: 'normal',             
                                color: '#2A5D75'  //标题颜色
                             },
            			},
            			tooltip: {},
            			legend: {
            				orient: 'vertical',
            				left: 'right',
                			data:['难易程度'],
              			  	textStyle: {
                              fontWeight: 'normal',              
                              color: 'black'   //legend颜色
                      },
            			},
            			xAxis: {
                			data: title,
                			 //  改变x轴颜色
                            axisLine:{
                                lineStyle:{
                                    color:'#2A5D75',
                                }
                            },
            			},
            			yAxis: {
            				 //  改变y轴颜色
                            axisLine:{
                                lineStyle:{
                                    color:'#2A5D75',
                                }
                            },
            			},
            			series: [{
                			name: '难易程度',
                			type: 'bar',
                	        itemStyle:{
                	        	normal: {
                	        		color:'rgb(39, 83, 124)',
    							},
                	        },
                	        label: {
								show: true, //开启显示
								position: 'top', //在上方显示
								textStyle: { //数值样式
									color:'black',
									fontSize: 16
								}
							},
                			data: list
            			}]
        			};

        			// 使用刚指定的配置项和数据显示图表。
        			myChart.setOption(option);
    			</script>

          	</div>
		</div>
		<!--第三部分-->
		<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-block-col">
        	<div class="tm-bg-primary-dark tm-block" >
                <div id="container3" onclick="window.location='analysistopic?ActionType=topic_Finish_Condition'"></div>
                <script type="text/javascript">
        			// 基于准备好的dom，初始化echarts实例
        			var myChart = echarts.init(document.getElementById('container3'));
        
    				var list=new Array();
    				var title=new Array();
					<%for(int i=0;i<topicDataList.size();i++){%>  
						list[<%=i%>]=<%=topicDataList.get(i)%>;
						//document.write(list[<%=i%>]);
	 				<%}%>
	 				<%for(int i=0;i<topicNameList.size();i++){%>  
						title[<%=i%>]=" <%=topicNameList.get(i)%> ";
						//document.write(list[<%=i%>]);
					<%}%>
        
        			// 指定图表的配置项和数据
        			var option = {
            			title: {
                			text: '题目完成情况',
                			 textStyle: {
                                 fontWeight: 'normal',             
                                 color: '#2A5D75'  //标题颜色
                         },
            			},
            			tooltip: {},
            			legend: {
            				orient: 'vertical',
            				left: 'right',
                			data:['难易程度'],
              			 	 textStyle: {
                              fontWeight: 'normal',              
                              color: 'black'   //legend颜色
                      },
            			},
            			xAxis: {
                			data: title,
                			axisLabel:{
                				//间隔显示
                	    		interval: 3,
                	    		//倾斜显示-90到90
                	    		rotate: 30
                	    	},
                	    	 //  改变x轴颜色
                            axisLine:{
                                lineStyle:{
                                    color:'#2A5D75',
                                }
                            },	
            			},
            			yAxis: {
            				 //  改变y轴颜色
                            axisLine:{
                                lineStyle:{
                                    color:'#2A5D75',
                                }
                            },
            			},
            			series: [{
                			name: '难易程度',
                			type: 'bar',
                			data: list,
                			itemStyle:{
                	        	color:'#2A5D75'
                	        },
            			},{
                			name: '难易程度',
                			type: 'line',
                			data: list
            			}]
        			};

        			// 使用刚指定的配置项和数据显示图表。
        			myChart.setOption(option);
    			</script>
    	    </div>
		</div>
		<!--第四部分-->
		<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-block-col">
        	<div class="tm-bg-primary-dark tm-block" > 
                <div id="container4"  onclick="window.location='analysissimilar?ActionType=similar_select'"></div>
               <script type="text/javascript">
        			// 基于准备好的dom，初始化echarts实例
        			var myChart = echarts.init(document.getElementById('container4'));
        
    				var list=new Array();
    				var title=new Array();
					<%for(int i=0;i<scorelist.size();i++){%>  
						list[<%=i%>]=<%=scorelist.get(i)%>;
						
	 				<%}%>
	 				<%for(int i=0;i<workList.size();i++){%>  
					title[<%=i%>]="<%=workList.get(i)%>";
					
 				<%}%>
        
        			// 指定图表的配置项和数据
        			// 指定图表的配置项和数据
        			var option = {
            			title: {
                			text: '作业相似度',
                			 textStyle: {
                                 fontWeight: 'normal',             
                                 color: '#2A5D75'  //标题颜色
                         },
            			},
            			tooltip: {},
            			legend: {
            				orient: 'vertical',
            				left: 'right',
                			data:['相似度'],
              			  	textStyle: {
                              fontWeight: 'normal',              
                              color: 'black'   //legend颜色
                      },
            			},
            			xAxis: {
                			data: title,
                			 //  改变x轴颜色
                            axisLine:{
                                lineStyle:{
                                    color:'#2A5D75',
                                }
                            },
            			},
            			yAxis: {
            				 //  改变y轴颜色
                            axisLine:{
                                lineStyle:{
                                    color:'#2A5D75',
                                }
                            },
            			},
            			series: [{
                			name: '相似度',
                			type: 'line',
                			markLine:{
                				/*以下设置一行后，平均线就没有开始和结束标记了（即看不见箭头了）*/
                				symbol:"none",
                				lineStyle:{
		            				normal:{
            							color:"#2A5D75",
            							width:2
            						}
            					},
            					itemStyle:{
                                    normal:{
                                        color:'#2A5D75' //  给折线添加颜色 
                                    },
                                }, 
                				data: [{
                					//name: '平均线',
    								// 支持 'average', 'min', 'max'
    	            				//type: 'average',
    	            				yAxis: 0.50,name:'相似度低'
                				},{
    	            				yAxis: 0.70,name:'相似度中等'
                				},{
    	            				yAxis: 0.90,name:'相似度较高'
                				}]
                			},
                			data: list
            			}]
        			};
        			// 使用刚指定的配置项和数据显示图表。
        			myChart.setOption(option);
    			</script>
			</div>
		</div>
	</div><!--最外层div-->
</body>
</html>